<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>作用域插槽</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<child>
			<!-- 作用域插槽 -->
			<template slot-scope="args">
				<h1>{{args.item}}</h1>
			</template>
		</child>
	</div>
	<script>
		Vue.component("child",{
			data: function() {
				return {
					list: [1,2,3,4,5]
				}
			},
			template: "<div>  <ul>  <slot v-for='item of list' :item='item'>{{item}}</slot>  </ul>  </div>"
		})

		new Vue({
			el: "#app",
			data: {}
		})
	</script>
</body>
</html>